<template>
    <div class="title-box">{{ title }}</div>
    <div class="filter-box">
      <FormList 
        ref="formRef"
        :formData="formData"
        :formConfig="formConfig"
      ></FormList>

      <div class="btn-group">
        <el-button 
          v-for="(btn, index) in btnGroup"
          v-permisson-v2="btn.permisson"
          :key="index"
          :type="btn.type"
          :icon="btn.icon || ''"
          :plain="btn.plain || false"
          @click="() => btn.onClick(formData, formRef)"
        >{{ btn.text }}</el-button>
      </div>
    </div>
</template>

<script setup name="user">
import { ref, reactive, toRaw, watchEffect } from "vue";
import { isFunction } from '@/utils/index';
import FormList from './FormList.vue';

const props = defineProps({
  formData: {
    type: Object,
    default: {},
  },
  formConfig: {
    type: Object,
    default: {},
  },
  btnGroup: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: 'title'
  }
})

const formRef = ref(null)

// const emit = defineEmits(['search', 'add'])

// console.log(props.formData, props.formConfig, '====');

// watchEffect(() => {
//   console.log(props.formData, props.formConfig, '==77777==');
// })

// const searchHandle = () => {
//   emit('search', {...props.formData, page: 1})
// };

// const resetFilterForm = () => {
//   formRef.value.resetFields()
//   emit('search', {...props.formData, page: 1})
// }

// const addHandle = () => {
//   emit('add')
// };

</script>

<style lang="less" scoped>

.title-box {
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
}

.filter-box {
  background-color: #fff;
  padding: 20px;
  .el-input {
    --el-input-width: 220px;
  }

  .el-select {
    --el-select-width: 220px;
  }
  .btn-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

</style>
